<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

    <script src="Bootstrap/js/jquery-1.11.1.min.js"></script>
    <script src="Bootstrap/js/bootstrap.min.js"></script>
    <script>
      /*  $(function(){
            $("#flip").click(function(){
                $("#panel").slideToggle();
            });
            $("body").not("#flip").on("click",function () {
                $("#panel").hide();
            })
        });*/

      $(document).ready(function(){
          $("#flip").click(function(){
              $("#panel").slideToggle();
          });
      });

    </script>

    <style type="text/css">
        *{
            margin: 0;
        }
        #panel
        {
            margin-top: 20px;
            border:solid 0px #c3c3c3;
            width:100px;
            display:none;
            position: absolute;
            border-radius: 15px;
        }
        .li{
            width:100%;
            height:35px;
            text-align:center;
            background-color: #DBE6EC;
            font-size: 15px;
        }
        body,html {
            font-family: "微软雅黑";
            color: gray;
            /* background-color: #9acfea;*/
        }
        .top-search {
            background: #33CCCC;
        }

        .input-group-addon{
            color:white;
            background-color: #33CCCC;
            border: 0;
        }
        .panel-heading{
            padding: 7px 0px;
            background-color: #33CCCC;
            position: fixed;
            top: 0;
        }
        ul{
            padding-left: 0px;
        }
        ul li{
            list-style:none;
            width: 60px;
        }
        ul li a{
            color: #0f0f0f;
            line-height: 35px;
        }
        #menu{
            width: 100%;
            height: 30px;
            margin-top:49px;
            background-color: #c7ddef;
        }

        #Info{
            width: 99%;
            height:130px;
            border-radius: 1px;
            border-bottom: 1px solid #cccccc;
            margin: 0 auto;
            }
        .left_img{
            width: 40%;
            height:130px;
            float: left;
            padding: 10px;
        }
        .left_img img{
            width: 100%;
            height: 110px;
        }
        .right_content{
            width: 100%;
            height:130px;
            margin-bottom: 50px;
        }
        .titl_1{
            width: 100%;
            height:80px;
        }
        .titl_2{
            width: 100%;
            margin-top: 10px;
            font-size: 12px;
            margin-top: 22px;
        }
        .ss{
            font-size: 14px;
            padding:5px;
            position:absolute;
            color: black;
        }

        .bottom-menu {
            border-top: 1px solid #D3D3D3;
            margin: 0 auto;
            position: fixed;
            bottom: 0;
            text-align: center;
            background: #33CCCC;
           }

        .bottom-menu td {
            padding-top: 6px;
            font-size: 13px;
            height: 50px;
            width: 200px;
        }
        .bottom-menu a {
            color: #ffffff;
        }
    </style>
    <script>
        $(function () {
            var url = "http://localhost:8080/zp/pageFind";
            $.post(url,function (data) {
                var html = "";

                for(var i =0;i<data.length;i++){
                    var url = "content.html?"+data[i].id;
                    var img = "http://localhost:8080"+data[i].file+"";
                    html += "<a href='"+url+"'> <div id='Info' ><div class='left_img'> <img alt='' src="+img+" /> </div>";
                    html += " <div class='right_content'><div class='titl_1'> <span class='ss'>";
                    html += data[i].title;
                    html += "  <br><span style='position: absolute;padding-right: 10px;text-align: justify; font-size: 10px; color: gray;'>";
                    html += data[i].release1+"</span></span></div><div class='titl_2'>";
                    html += " <span class='glyphicon glyphicon-eye-open'></span>";
                    html += data[i].clickNum;
                    html += "<span style='float: right;'>";
                    html += data[i].starttime+"&nbsp;&nbsp;&nbsp;&nbsp;</span></div> </div></div> </a>";
                }
                $("#cot").append(html);
            });
        });
    </script>
<body>
<!--搜索框-->
<header>
    <div class="top-search" >
        <div class="panel-heading" >
            <div class="input-group">
                <span class="input-group-addon" ><span id="flip" class="glyphicon glyphicon-th-list"></span>
                </span>
                <input type="text" class="form-control" id="con" placeholder="输入搜索内容...">
                <span class="input-group-addon" onclick="search()"><span class="glyphicon glyphicon-search"></span></span>
            </div>
            <script>
                function search() {
                    var content = $("#con").val();
                    $.ajax({
                        url:"http://localhost:8080/zp/search?content="+content,
                        type:"post",
                        success:function (data) {
                            $("#cot").html("");
                            for(var i =0;i<data.length;i++){
                                var html = "";
                                var url = "content.html?"+data[i].id;
                                var img = "http://localhost:8080"+data[i].file+"";
                                html += "<a href='"+url+"'> <div id='Info' ><div class='left_img'> <img alt='' src="+img+" /> </div>";
                                html += " <div class='right_content'><div class='titl_1'> <span class='ss'>";
                                html += data[i].title;
                                html += "  <br><span style='position: absolute;padding-right: 10px;text-align: justify; font-size: 10px; color: gray;'>";
                                html += data[i].release1+"</span></span></div><div class='titl_2'>";
                                html += " <span class='glyphicon glyphicon-eye-open'></span>";
                                html += data[i].clickNum;
                                html += "<span style='float: right;'>";
                                html += data[i].starttime+"&nbsp;&nbsp;&nbsp;&nbsp;</span></div> </div></div> </a>";
                            }
                            $("#cot").append(html);
                        }
                    })
                }
            </script>
        </div>
    </div>
</header>
<div id="panel">
    <ul>
        <li class="li"><span class="glyphicon glyphicon-user" style=" color: #a94442;"></span>&nbsp;&nbsp;&nbsp;<a href="login.html" >个人中心</a><br>
        <li class="li"><span class="glyphicon glyphicon-copyright-mark"style=" color: #a94442;"></span>&nbsp;&nbsp;&nbsp;<a href="#contact">版权声明</a><br>
        <li class="li"><span class="glyphicon glyphicon-log-out"style=" color: #a94442;"></span>&nbsp;&nbsp;&nbsp;<a href="#about">退出应用</a><br>
    </ul>
</div>
<div id="menu">
    <!--<table>-->
        <!--<td>宣讲会</td>-->
        <!--<td>面试题</td>-->
        <!--<td>面试技巧</td>-->
        <!--<td>面试题</td>-->
    <!--</table>-->
</div>
<div style="border: 1px;border-color: #2B2B2B ;margin-top: 5px">
    <!--按钮组-->

    <div class="content">

    </div>
</div>

</div>
<!-- 内容块 -->
<div id="cot">


</div>








<!--<div id="myCarousel" class="carousel slide">
    &lt;!&ndash; 轮播（Carousel）指标 &ndash;&gt;
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    &lt;!&ndash; 轮播（Carousel）项目 &ndash;&gt;
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/4.jpg" alt="First slide">
        </div>
        <div class="item">
            <img src="images/1.jpg" alt="Second slide">
        </div>
        <div class="item">
            <img src="images/2.jpg" alt="Third slide">
        </div>
        </div>
    &lt;!&ndash; 轮播（Carousel）导航 &ndash;&gt;
    <a class="carousel-control left" style="margin-top:60px; " href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" style="margin-top:60px; " href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>-->

<!--<div class="release-list">
    <div style="text-align: center;background: white;">
        <div class="zp-info">
            <div class="modal-body">
        </div>
            <br>
            &lt;!&ndash;<span class="glyphicon glyphicon-time" style="color:#2894FF"></span>&nbsp;&nbsp;发布时间：2015-10-12&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="glyphicon glyphicon-heart-empty" style="color:red"></span>收藏&ndash;&gt;
        </div>
    </div>-->

<!--底部导航菜单开始-->
<div class="bottom-menu">
    <table>
        <tr>
            <td><a href="index.html" style="color:#66ffff;"><span class="glyphicon glyphicon-home"></span>
                    <br>首页</a></td>
            <td><a href="release.html"><span class="glyphicon glyphicon-pencil"></span><br>我要发布</a></td>
            <td><a href="my_collect.html"><span class="glyphicon glyphicon-star"></span><br>我的收藏</a></td>
            <td><a href="mypage.html"><span class="glyphicon glyphicon-th-list"></span><br>个人中心</a></td>
        </tr>
    </table>
</div></div>
<!--底部导航菜单结束-->

</body>
</html>